<template>
    <div>
        <div class="content white-block">
            <div class="toolbar">
                <div class="provider">
                    <el-select v-model="nameValue" placeholder="请选择">
                        <el-option
                            v-for="item in nameOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model="atomicInput" placeholder="请输入" class="input"
                              @keyup.enter="systemPaging(1)"></el-input>
                    <span>状态</span>
                    <el-select v-model="statusVal" placeholder="请选择">
                        <el-option
                            v-for="item in statusOpt"
                            :key="item.statusVal"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="primary" @click="systemPaging(1)">查询</el-button>
                </div>
            </div>
            <div class="atomicTable">
                <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                               v-loading="loading"
                               @cell-mouse-enter="handClick"
                               @row-click="handleClick"
                               class="mt20">
                    <template slot="adapterType" slot-scope="scope">
                        <span v-if="scope.row.adapterType === '1'">HTTP</span>
                        <span v-if="scope.row.adapterType === '2'">SOAP</span>
                        <span v-if="scope.row.adapterType === '3'">WEBSERVICE</span>
                        <span v-if="scope.row.adapterType === '4'">H5</span>
                        <span v-if="scope.row.adapterType === '5'">微信小程序</span>
                    </template>
                    <template slot="status" slot-scope="scope">
                        <span v-if="scope.row.status === '1'">开启</span>
                        <span v-if="scope.row.status === '0'">关闭</span>
                    </template>
                    <!--                <template slot="operation" slot-scope="scope">-->
                    <!--                    &lt;!&ndash;                    <el-link type="primary" :underline="false" @click="tableDetails(scope.row)">详情</el-link>&ndash;&gt;-->
                    <!--                </template>-->
                </table-example>
                <page :data="page" v-if="page" class="mt30 page" @jumpPage="systemPaging"></page>
            </div>

        </div>
        <el-drawer :visible.sync="serListDetailsFlag" :append-to-body="true" direction="rtl" size="70%">
            <!-- 点击详情-->
            <div class="paddingL paddingT bgc">
                <div class="service">提供者系统名称：</div>
                <div>{{detailsData[0].systemName}}</div>
                <i class="icon el-icon-close" @click="closeDrawer"></i>
            </div>
            <div class="details white-block">
                <div class="detailsBox">
                    <div class="detailsMsg bgc">
                        <el-row>
                            <el-col :span="4">
                                <span>原子服务名称：</span>
                                <p :title="detailsData[0].atomserviceName">
                                    {{detailsData[0].atomserviceName}}
                                </p>
                            </el-col>
                            <el-col :span="4">
                                <span>原子服务编码：</span>
                                <p :title="detailsData[0].atomserviceCode">
                                    {{detailsData[0].atomserviceCode}}
                                </p>
                            </el-col>
                            <el-col :span="4">
                                <span>最大连接数：</span>
                                <p>
                                    {{detailsData[0].maxClients}}
                                </p>
                            </el-col>
                            <el-col :span="4">
                                <span>适配类型：</span>
                                <p>
                                    {{detailsData[0].adapterType}}
                                </p>
                            </el-col>
                            <el-col :span="4">
                                <span>超时时间(ms)：</span>
                                <p>
                                    {{detailsData[0].overTime}}
                                </p>
                            </el-col>
                            <el-col :span="4">
                                <span>状态：</span>
                                <p>
                                    {{detailsData[0].status === '1' ? '开启' : '关闭'}}
                                </p>
                            </el-col>
                        </el-row>
                    </div>
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="部署信息" name="first" class="tabsHeight">
                            <div class="tab-content">
                                <div class="serConsumeMsg">
                                    <div class="paddingL">
                                        <div class="current provider mapOutMsg">
                                            <breadcrumb :title="'部署信息'" class="breadcrumb"></breadcrumb>
                                        </div>
                                        <div class="deployBox mt30">
                                            <ul>
                                                <li v-for="item in deploymentData" :key="item.id">
                                                    <div class="img">
                                                        <el-image :src="url"
                                                                  style="width: 1rem; height: 1rem"></el-image>
                                                    </div>
                                                    <span class="font">{{item.instancename}}</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import breadcrumb from '../../components/breadcrumb'

    export default {
        data() {
            return {
                serListDetailsFlag: false,
                tableData: [],
                header: [
                    {
                        prop: 'systemName',
                        label: '提供者系统名称',
                        minWidth: '150',
                        align: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'atomserviceName',
                        label: '原子服务名称',
                        minWidth: '150',
                        align: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'atomserviceCode',
                        label: '原子服务编码',
                        minWidth: '100',
                        align: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'maxClients',
                        label: '最大连接数',
                        minWidth: '80',
                        align: 'left'
                    },
                    {
                        prop: 'adapterType',
                        label: '适配类型',
                        minWidth: '120',
                        align: 'left'
                    },
                    {
                        prop: 'overTime',
                        label: '超时时间(ms)',
                        minWidth: '100',
                        align: 'left'
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: '40',
                        align: 'center'
                    }
                    // {
                    //     prop: 'operation',
                    //     label: '操作',
                    //     minWidth: '150',
                    //     align: 'center'
                    // }
                ],
                slotColumns: ['status', 'adapterType'],
                nameOptions: [
                    {
                        value: '1',
                        label: '原子服务名称'
                    }, {
                        value: '2',
                        label: '原子服务编码'
                    }
                ],
                nameValue: '1',
                statusOpt: [
                    {
                        value: '2',
                        label: '全部'
                    }, {
                        value: '1',
                        label: '开启'
                    }, {
                        value: '0',
                        label: '关闭'
                    }
                ], // 状态
                statusVal: '2',
                atomicInput: '',
                page: null,
                currentPage: 1,
                pageSize: 10,

                url: '../../../static/images/use.png',
                detailsData: [{
                    atomserviceName: '',
                    systemName: '',
                    atomserviceCode: '',
                    atomserviceVersion: '',
                    status: '',
                    maxClients: '',
                    adapterType: '',
                    overTime: ''
                }],
                deploymentData: [],
                loading: false,
                activeName: 'first'
            }
        },
        created() {
            let lett = this
            document.onkeydown = function (e) {
                let key = window.event.keyCode
                if (key === 13) {
                    lett.systemPaging(1)
                }
            }
        },
        mounted() {
            this.getServiceList()
        },
        methods: {
            // 获取初始列表数据
            getServiceList() {
                this.loading = true
                this.$http.get('/esbAtomServiceDetailed/selectServiceList', {
                    current: this.currentPage || 1,
                    size: this.pageSize,
                    message: this.atomicInput,
                    type: this.nameValue,
                    status: this.statusVal
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.page = result.data
                        this.tableData = result.data.records
                    }
                })
            },
            systemPaging(val) {
                this.currentPage = val
                this.getServiceList()
            },

            // 关闭抽屉
            closeDrawer() {
                this.serListDetailsFlag = false
            },
            // 表格点击事件
            handleClick(row) {
                this.serListDetailsFlag = true
                // 获取服务配置信息数据
                this.$http.get('/esbAtomServiceDetailed/detailRepertoireMess', {
                    id: row.id
                }).then(result => {
                    if (result.success) {
                        if (result.data[0].adapterType === '1') {
                            result.data[0].adapterType = 'HTTP'
                        } else if (result.data[0].adapterType === '2') {
                            result.data[0].adapterType = 'SOAP'
                        } else if (result.data[0].adapterType === '3') {
                            result.data[0].adapterType = 'WEBSERVICE'
                        } else if (result.data[0].adapterType === '4') {
                            result.data[0].adapterType = 'H5'
                        } else if (result.data[0].adapterType === '5') {
                            result.data[0].adapterType = '微信小程序'
                        }
                        this.detailsData = result.data
                    }
                })
                // 获取部署信息数据
                this.$http.get('/EsbServiceAtomDeploy/selectOne', {
                    deploytype: 1,
                    serviceid: row.id
                }).then(result => {
                    if (result.success) {
                        this.deploymentData = result.data
                    }
                })
            },

            // 表格鼠标移入事件
            handClick(row) {

            }
        },
        components: {
            tableExample,
            page,
            breadcrumb
        }
    }
</script>

<style scoped lang="less">
    .content {
        width: 100%;

        .provider {
            span {
                margin-left: .1rem;
            }
        }
    }

    .paddingT {
        padding-top: 0.2rem;
    }

    .paddingL {
        position: relative;
        padding-left: 0.2rem;

        .service {
            padding-bottom: 0.1rem;
            color: #999;
            font-size: 0.14rem;
            line-height: .35rem;
        }

        .icon {
            position: absolute;
            top: 0.25rem;
            right: 0.2rem;
            font-size: 0.30rem;
            color: #999;
            cursor: pointer;
        }

        .font {
            font-size: 0.16rem;
        }
    }

    .bgc {
        background-color: #F1F5FD;
    }

    .details {
        width: 100%;
        padding: 0;
        position: relative;

        .detailsBox {
            height: 100%;

            .btn {
                margin-right: 1rem;
            }

            .detailsMsg {
                /*padding: 0.2rem 0  0.1rem  0.2rem;*/
                padding: 0.2rem 0 .1rem 0.2rem;
                font-size: 0.14rem;

                span {
                    width: 2rem;
                    color: #999;
                    display: inline-block;
                }

                p {
                    line-height: .3rem;
                    color: #333;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    width: 100%;
                }
            }

            .breadcrumb {
                height: 0.15rem;
                margin-top: 0.4rem;
                margin-bottom: 0.2rem;
                padding-left: 0.1rem;
                border-left: 2px solid #5586FB;
            }

            .deployBox {
                width: 100%;

                li {
                    display: inline-block;
                    height: 3rem;
                    width: 10%;
                    margin-right: .3rem;
                    margin-bottom: .3rem;
                    margin-left: .3rem;
                    text-align: center;

                    .img {
                        width: 1rem;
                        height: 1.15rem;
                        margin-left: 37%;
                        margin-top: .5rem;
                    }

                    span {
                        display: inline-block;
                        margin-top: .1rem;
                        margin-left: 45%;
                        font-size: .16rem;
                    }
                }
            }
        }
    }

    .provider {
        line-height: 0.4rem;
        font-size: 0.16rem;
    }
</style>
